<template>
  <div class="edit-form edit-dialog">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleFormRef"
      label-width="100px"
      class="demo-ruleForm"
      size="small"
    >
      <div class="tips">{{ pwdInfo.msg }}</div>

      <el-form-item label="用户名：">
        <el-input
          :value="pwdInfo.name"
          disabled
          maxlength="50"
        ></el-input>
      </el-form-item>
      <el-form-item label="原密码：" prop="originalPassword">
        <el-input
          v-model="ruleForm.originalPassword"
          show-password
          maxlength="50"
        ></el-input>
      </el-form-item>
      <el-form-item label="新密码：" prop="newPassword">
        <el-input
          v-model="ruleForm.newPassword"
          show-password
          maxlength="50"
        ></el-input>
      </el-form-item>
      <el-form-item label="重复新密码：" prop="comfirmPwd">
        <el-input
          v-model="ruleForm.comfirmPwd"
          show-password
          maxlength="50"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="pwd-tips">
      新密码规则：8-16位，由大写字母、小写字母、数字、特殊字符组成的密码组合；特殊字符包含：@*&!#%等
    </div>
    <div class="btn-group">
      <el-button @click="close()" v-if="!pwdInfo.required">关闭</el-button>

      <el-button
        :loading="btnLoading"
        v-prevent-repeat-click
        type="primary"
        @click="submitForm(ruleFormRef)"
      >
        提交
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'updatepwd'
}
</script>

<script setup>
import { ElMessage } from 'element-plus'
const btnLoading = ref(false)
const ruleFormRef = ref()

const ruleForm = reactive({
  originalPassword: '',
  newPassword: '',
  comfirmPwd: ''
})

const reg =
  /^(?![A-Za-z0-9]+$)(?![a-z0-9\W]+$)(?![A-Za-z\W]+$)(?![A-Z0-9\W]+$)[a-zA-Z0-9\W]{8,16}$/
// let reg = /(?!^(\d+|[a-zA-Z]+|[~@*&!#%]+)$)^[\w~@*&!#%]{8,16}$/
// let reg = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{8,16}$/.
var validateNewPwd = (rule, value, callback) => {
  if (!reg.test(value)) {
    callback(
      new Error(
        '密码应是8-16位，由大写字母、小写字母、数字、特殊字符组成的密码组合；特殊字符包含：@*&!#%等'
      )
    )
  } else if (ruleForm.originalPassword === value) {
    callback(new Error('新密码与旧密码不可一致！'))
  } else {
    callback()
  }
}
var validateComfirmPwd = (rule, value, callback) => {
  if (!reg.test(value)) {
    callback(
      new Error(
        '密码应是8-16位，由大写字母、小写字母、数字、特殊字符组成的密码组合；特殊字符包含：@*&!#%等'
      )
    )
  } else if (ruleForm.newPassword !== value) {
    callback(new Error('确认密码与新密码不一致！'))
  } else {
    callback()
  }
}
const rules = reactive({
  originalPassword: [
    {
      required: true,
      message: '请输入原登录密码',
      trigger: 'blur'
    }
  ],
  newPassword: [
    {
      required: true,
      validator: validateNewPwd,
      trigger: 'blur'
    }
  ],
  comfirmPwd: [
    {
      required: true,
      validator: validateComfirmPwd,
      trigger: 'blur'
    }
  ]
  
})

defineExpose({
  btnLoading
})

const emit = defineEmits(['close', 'submitForm'])
const props = defineProps({
  pwdInfo: {
    type: Object,
    default: () => {}
  }
})

const close = () => {
  emit('close')
}

const submitForm = fromName => {
  fromName
    .validate(valid => {
      if (valid) {
        if (ruleForm.newPassword != ruleForm.comfirmPwd) {
          ElMessage.error('确认密码与新密码不一致！')
          return false
        }
        if (ruleForm.originalPassword == ruleForm.newPassword) {
          ElMessage.error('新密码与旧密码不可一致！')
          return false
        }
        btnLoading.value = true
        emit('submitForm', {
          originalPassword: ruleForm.originalPassword,
          newPassword: ruleForm.newPassword
        })
        ruleForm.originalPassword = ''
        ruleForm.newPassword = ''
        ruleForm.comfirmPwd = ''
      }
    })
    .catch(() => {})
}
</script>

<style scoped>
.pwd-tips {
  text-indent: 2em;
  color: red;
  font-size: 14px;
}

.pwd-tips {
  margin-bottom: 10px;
}

.el-form-item {
  margin-bottom: 34px;
  align-items: center;
}

.tips {
  min-height: 30px;
  line-height: 30px;
  text-indent: 2em;
  width: 100%;
  background-color: #fff4e2;
  margin-bottom: 10px;
  color: red;
  font-size: 14px;
}
</style>
